'use client';

// 分享码详情对话框组件
// REF: API-SHARE189-004@v1.0

import React from 'react';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';

import { ShareDetailDialogProps } from './types';
import { statusMap, formatBytes, formatDate } from './utils';
import { FileTree } from './FileTree';

export function ShareDetailDialog({ open, onOpenChange, shareData }: ShareDetailDialogProps) {
  if (!shareData) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>分享码详情</DialogTitle>
          <DialogDescription>
            查看分享码的详细信息和文件列表
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-6">
          {/* 基本信息 */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-gray-700">分享码</label>
              <div className="mt-1 font-mono text-sm bg-gray-50 p-2 rounded">
                {shareData.shareCode}
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">访问码</label>
              <div className="mt-1 font-mono text-sm bg-gray-50 p-2 rounded">
                {shareData.accessCode || '无'}
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">状态</label>
              <div className="mt-1">
                <Badge className={statusMap[shareData.status as keyof typeof statusMap].color}>
                  {statusMap[shareData.status as keyof typeof statusMap].text}
                </Badge>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">创建时间</label>
              <div className="mt-1 text-sm text-gray-600">
                {formatDate(shareData.createdAt)}
              </div>
            </div>
          </div>
          
          {/* 描述 */}
          {shareData.description && (
            <div>
              <label className="text-sm font-medium text-gray-700">描述</label>
              <div className="mt-1 text-sm text-gray-600 bg-gray-50 p-2 rounded">
                {shareData.description}
              </div>
            </div>
          )}
          
          {/* 分享信息 */}
          {shareData.shareInfo && (
            <div>
              <label className="text-sm font-medium text-gray-700">分享信息</label>
              <div className="mt-1 bg-gray-50 p-4 rounded space-y-2">
                <div className="flex justify-between">
                  <span className="text-gray-600">标题:</span>
                  <span>{shareData.shareInfo.title}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">文件数量:</span>
                  <span>{shareData.shareInfo.fileCount}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">总大小:</span>
                  <span>{formatBytes(shareData.shareInfo.totalSize)}</span>
                </div>
                {shareData.shareInfo.expireTime && (
                  <div className="flex justify-between">
                    <span className="text-gray-600">过期时间:</span>
                    <span>{shareData.shareInfo.expireTime}</span>
                  </div>
                )}
              </div>
            </div>
          )}
          
          {/* 文件树 */}
          {shareData.fileTree && shareData.fileTree.length > 0 && (
            <div>
              <label className="text-sm font-medium text-gray-700">文件列表</label>
              <div className="mt-1 border rounded-lg max-h-96 overflow-y-auto">
                <FileTree nodes={shareData.fileTree} />
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

export default ShareDetailDialog;